<template>
  <el-container>
    <el-main>
      <div class="app-main" style="width: 1000px">
        <div class="box">
            <div class="searchBox">
             <span> 已有标签</span>
             <el-button size="small" type="primary" @click="dialogVisible = true">
                添加标签
            </el-button>
        </div>
        </div>
      
        <el-dialog
          style="width: 60%"
          :visible.sync="dialogVisible"
          class="createCase"
        >
         <el-form 
          label-position="left"
          ref="ruleForm"
          :model="formdata"
          style="width: 60%; margin-left: 30px"
          :rules="rules"
        >
          <el-form-item label="名称:" prop="name">
            <el-input v-model="formdata.name"></el-input>
          </el-form-item>
          <el-form-item label="描述:" prop="description">
            <el-input v-model="formdata.description"></el-input>
          </el-form-item>
          <el-form-item label="背景颜色:" prop="color">
            <el-input
              placeholder="请输入内容"
              v-model="formdata.color"
              class="input-with-picker"
            >
              <template slot="prepend"
                ><el-color-picker
                  v-model="formdata.color"
                  show-alpha
                  :predefine="predefineColors"
                >
                </el-color-picker
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item label="标签颜色:" v-show="false">
            <div id="coldiv">
              <el-row>
                <el-col :span="2">
                  <div
                    class="grid-content bg-purple-dark"
                    :style="{
                      background: '' + tagC + '',
                      color: '' + tagC + '',
                    }"
                  >
                    1
                  </div>
                </el-col>
                <el-col :span="22">
                  <div id="dialog-input-text1" class="dialog-input-text1">
                    <el-input
                      class="dialog-input-text"
                      v-model="tagC"
                    ></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>

            <el-tag
              v-for="tag in tagColors"
              :key="tag.label"
              :color="tag.tagColor"
              @click="tagC = tag.tagColor"
            >
            </el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >添加</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
     </el-dialog>
      <el-table
          ref="recordTable"
          :data="labellist"
          stripe
          :show-header="false"
          highlight-current-row
          :height="tableHeight" >
         <el-table-column>
            <template slot-scope="{ row }">
            <el-row>
               <el-col class="collabel" :span=22>
                 <div class="labelcolor" :style="'background-color:'+row.color"> </div>
                  <div   class="labelname">   {{row.name}}</div>
               </el-col>
               <el-col :span=2>
                 <div class="labeldelete">
                    <el-button type="primary" size="small" @click="handleDelete(row)">删除</el-button>
                 </div>
                
               </el-col>
            </el-row>
          </template>
          </el-table-column>
      </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import tagColors from "./tagColors.json";
import {createLabel ,deleteLabel,fetchLabel} from "@/api/labels"

export default {
  name: "ComplexTable",
  data() {
    return {
       tableHeight: 50,
       labellist:[],
       dialogVisible: false,
       formdata:{
        name: "",
        description: "",
        color: "rgba(255, 215, 0, 1)",
      },//form
      rules:{
        name:[
             { required: true, message: '请输入标签名', trigger: 'blur' },
             { min: 1, max: 5, message: '请输入五个字以内标签名', trigger: 'blur' }
        ],
        description:[
          {required:true,message:'请输入标签描述'}
        ],
        color:[{required:true,message:'请选择颜色'}]
      },
      tagColors: tagColors,
      tagC: "white",
      color: "rgba(255, 215, 0, 1)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
    };
  },
    mounted() {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.tableHeight =
        window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () => {
        this.tableHeight =
          window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      };
    });
  },
  created(){
   this.getLabels()
  },
  methods:{
    resetForm(formName){
      this.$refs[formName].resetFields()
    },
     getLabels(){
      this.labellist=[]
      fetchLabel().then((response)=>{
        for (let i in response.data.list) {
            this.labellist.push(JSON.parse(JSON.stringify(response.data.list[i])));  
          }
      })
    },
    submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            createLabel(this.formdata).then((response) => {
          if(response.msg==="此标签重复"){
            this.$notify({
            // title: "Success",
            message: "请勿添加重复标签",
            type: "error",
            duration: 2000,
          });
        }else if(response.code==2000){
            this.labellist=[];
            this.getLabels();
            this.dialogVisible=false;
            this.resetForm(formName)
       
            this.$notify({
            message: "添加成功",
            type: "success",
            duration: 2000,
        });
        }
      });
          } else {
           this.$notify.error({
          title: '添加失败',
          message: '请输入标签名'
        });
            return false;
          }
        });
    
    },
    handleDelete(row){
      deleteLabel(row.id).then((response)=>{
          if(response.code==2000){
             this.labellist=[];
            this.getLabels();
            this.$notify.success({
              title:'删除成功',
              duration:2000
            });
          }else return false
      })
     
    }
  }
};
</script>
<style lang="scss" scoped>
.el-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 16px;
  width: 100%;
  padding: 10px;
  background-color: #fafafa;
  border-top: 1px solid #dbdbdb;
}
span {
  margin-right: 20px;
}
#coldiv {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
#coldiv ::v-deep .el-input__inner {
  border: 0px;
}

.input-with-picker ::v-deep .el-input__inner {
  border-left-width: 0px;
}

.input-with-picker ::v-deep .el-input__inner:focus,
.input-with-picker ::v-deep .el-color-picker__color {
  border-color: #dcdfe6;
}
.input-with-picker ::v-deep .el-input-group__prepend {
  background-color: #fff;
  padding: 0px;
  border: 0px;
}
.input-with-picker ::v-deep .el-color-picker__trigger {
  padding: 0px;
  border-radius: 0px;
  border: 0px;
}
.input-with-picker ::v-deep .el-color-picker__color {
  border: 1px solid #dcdfe6;
  border-radius: 1px 0px 0px 1px;
  border-right-width: 0px;
}
.box{
   background-color: white;
   border-bottom: 1px solid #e8e8e8;
   height: 80px;
   width: 100%;
}
.searchBox {
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  padding: 0 16px;
  background-color: #fafafa;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.createCase::v-deep.el-dialog__wrapper {
  overflow-y: hidden;
  margin: auto;
}
.labeldelete{
  // display: flex;
  // justify-content: flex-end;
}
.labelcolor {
  height: 30px;
  width: 30px; 
  display: inline-block;
  border-radius: 10px;
  align-items: center;
   margin-left: 20px;
}
.labelname {
  height: 30px;
  width: 50%; 
  display: inline-block;
  line-height: 30px;
  margin-left: 20px;
}
.collabel{
  display: flex;
  align-items: center;
}

</style>
